<template>
  <div class="el-badge">
    <slot></slot>
    <transition name="el-zoom-in-center">
      <sup
        v-show="!hidden && (content || content === 0 || isDot)"
        v-text="content"
        class="el-badge__content"
        :class="{ 'is-fixed': $slots.default, 'is-dot': isDot }">
      </sup>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'ElBadge',

  props: {
    value: {},
    max: Number,
    isDot: Boolean,
    hidden: Boolean
  },

  computed: {
    content() {
      if (this.isDot) return;

      const value = this.value;
      const max = this.max;

      if (typeof value === 'number' && typeof max === 'number') {
        return max < value ? `${max}+` : value;
      }

      return value;
    }
  }
};
</script>
<style lang="scss">
.el-badge{position:relative;vertical-align:middle;display:inline-block}
.el-badge__content{background-color:#FF6700;border-radius:10px;color:#fff;display:inline-block;font-size:12px;height:16px;line-height:16px;padding:0 5px;text-align:center;white-space:nowrap; vertical-align: middle;}
.el-badge__content.is-fixed{position:absolute;top:0;right:10px;-webkit-transform:translateY(-50%) translateX(100%);transform:translateY(-50%) translateX(100%)}
.el-badge__content.is-fixed.is-dot{right:5px}
.el-badge__content.is-dot{height:8px;width:8px;padding:0;right:0;border-radius:50%}

</style>
